<template>
  <div class="dm_productsDetails_top">
    <div style="display: none">{{ token }}</div>
    <el-row>
      <el-col :span="8">
        <dl>
          <dt>
            <img
              v-if="imgList[actionIndex]"
              :src="imgList[actionIndex]"
              alt="loading..."
            />
          </dt>
          <dd>
            <div
              v-for="(img, index) in imgList"
              :key="index"
              @mouseover="handleTogglePic(index)"
              :class="actionIndex === index ? 'active' : ''"
            >
              <img :src="img" alt="" />
            </div>
          </dd>
        </dl>
      </el-col>
      <el-col :span="16">
        <div class="products_title" :title="basicInfo.name || '-'">
          {{ basicInfo.name || "敬请期待~~~" }}
        </div>
        <h3 class="ellipsis" :title="basicInfo.subTitle || '-'">
          {{ basicInfo.subTitle || "敬请期待~~~" }}
        </h3>
        <div class="price">
          售价：
          <div>
            <span class="unit">￥</span>
            {{
              basicInfo.price && !isNaN(basicInfo.price)
                ? Number(basicInfo.price).toFixed(2)
                : 0
            }}
          </div>
        </div>
        <el-row class="Specifications">
          <el-col :span="2">规格：</el-col>
          <el-col :span="22">
            <el-row>
              <el-col
                :span="11"
                v-for="(item, idx) in specs"
                :key="idx"
                :class="skuId === idx ? 'active' : ''"
                @click.native="handleToggleSpecs(item.id)"
              >
                <div class="ellipsis" :title="item.id || '-'">
                  {{ item.spData || "-" }}
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="Number">
          <el-col :span="2">数量：</el-col>
          <el-col :span="22">
            <el-input-number
              v-model="num"
              @change="watchNumber"
              :min="1"
              :max="99"
              size="small"
            ></el-input-number>
          </el-col>
        </el-row>
        <el-row class="handleButton">
          <el-col :span="2" :style="{ height: '1px' }"></el-col>
          <el-col :span="22">
            <el-button
              type="primary"
              :disabled="isDisabled"
              plain
              @click="immediatePurchase"
              >立即购买</el-button
            >
            <el-button
              type="primary"
              :disabled="isDisabled"
              @click="handleAddCart"
              >加入购物车</el-button
            >
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import loginVue from '../../pages/login.vue';

export default {
  props: {
    meta: {
      type: Object,
      default() {
        return {};
      }
    },
    basicInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    imgList: {
      type: Array,
      default() {
        return [];
      }
    },
    specs: {
      type: Array,
      default() {
        return [];
      }
    },
    getDetailsData: Function
  },
  data() {
    return {
      actionIndex: 0,
      num: 1,
      isDisabled: false,
      skuId: 0,
      skuCode: "",
      productAttr: ""
    };
  },
  updated() {
    if (!this.username || !this.token) {
      this.isDisabled = true;
    }
  },
  methods: {
    // 立即购买
    immediatePurchase() {

      if (this.isDisabled) return;

      this.handleAddCart();
      const ids = this.$store.state.user.ids;
      this.$nextTick(() => {
        this.$router.push({
          name: "settlementPage",
          query: {
            ids: ids
          }
        });
      }, 1000);
    },
    // 加入购物车
    handleAddCart() {
      const {
        id,
        price,
        pic,
        name,
        subTitle,
        productCategoryId,
        brandName,
        productSn
      } = this.basicInfo;
      this.specs.forEach(item => {
        if (item.id === this.skuId) {
          this.skuCode = item.skuCode;
          this.productAttr = item.ospData;
        }
      });
      if (this.isDisabled) return;
      console.log(this.basicInfo);
      this.$store
        .dispatch("handleAddCart", {
          productId: id,
          quantity: this.num,
          price: price ? Number(price) * this.num : price,
          productSkuId: this.skuId,
          productPic: pic,
          productName: name,
          productSubTitle: subTitle,
          productSkuCode: this.skuCode,
          productCategoryId: productCategoryId,
          productBrand: brandName,
          productSn: productSn,
          productAttr: this.productAttr
        })
        .then((res) => {
          this.$message({
            message: "添加购物车成功",
            type: "success"
          });
        })
        .catch(() => {
          this.$message.error("添加购物车失败");
        });
    },
    // 数量
    watchNumber(value) {
      this.num = value;
    },
    // 选择预览图片
    handleTogglePic(index) {
      this.actionIndex = index;
    },
    // 选择规格
    handleToggleSpecs(id) {
      if (id) {
        //this.$router.push({ name: "productsDetails", params: { id } });
        //this.getDetailsData({ id });
        this.actionIndex = 0;
        this.skuId = id;
        this.num = 1;
      }
    }
  },
  computed: {
    username() {
      return this.$store.state.user.username; //用computed接收
    },
    token() {
      return this.$store.state.user.token; //用computed接收
    }
  }
};
</script>
